<template>
  <v-card
    flat
    tile
  >
    <!--异步加载轮播图的情况;-->
    <v-window v-if="imageSrcList.length > 0" v-model="onboarding">
      <v-window-item
        v-for="(item, index) in imageSrcList"
        :key="`card-${index}`"
      >
        <v-card
          color="transparent"
          height="200"
        >
          <v-row
            class="fill-height"
            align="center"
            justify="center"
          >
            <v-card-text class="text-center">
              <img class="image-carsousel-image" :src="item">
            </v-card-text>
          </v-row>
        </v-card>
      </v-window-item>
    </v-window>
    <v-card-actions class="justify-space-between">
      <v-btn
        text
        @click="prev"
      >
        <v-icon>mdi-chevron-left</v-icon>
      </v-btn>
      <v-item-group
        v-model="onboarding"
        class="text-center"
        mandatory
      >
        <v-item
          v-for="(item, index) in imageSrcList"
          :key="`btn-${index}`"
          v-slot="{ active, toggle }"
        >
          <v-btn
            :input-value="active"
            icon
            @click="toggle"
          >
            <v-icon>mdi-record</v-icon>
          </v-btn>
        </v-item>
      </v-item-group>
      <v-btn
        text
        @click="next"
      >
        <v-icon>mdi-chevron-right</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
import defaultImage from './example-image.png'
export default {
  name: 'H5ImageCarousel', // 这个名字很重要，它就是未来的标签名<h5-image-carsousel></h5-image-carsousel>
  props: {
    imageSrcList: {
      type: Array,
      default: () => {
        return [
          defaultImage,
          defaultImage,
          defaultImage
        ]
      }
    },
    interval: {
      type: Number,
      default: 2500
    }
  },
  data() {
    return {
      onboarding: 0
    }
  },
  methods: {
    next() {
      this.onboarding = this.onboarding + 1 === this.imageSrcList.length ? 0 : this.onboarding + 1
    },
    prev() {
      this.onboarding = this.onboarding - 1 < 0 ? this.imageSrcList.length - 1 : this.onboarding - 1
    }
  }
}
</script>
